<template>
  <div class="head" v-loading="load">
    <div class="title">
      <span>供应商信息：</span>
      <div>
        <el-button type="primary" icon="Edit" v-if="!showIf" @click="editMode">编辑</el-button>
        <el-button type="primary" icon="CircleClose" v-if="showIf" @click="showIf = false">
          取消编辑
        </el-button>
        <el-button type="success" icon="CircleCheck" v-if="showIf" @click="submit">
          保存编辑
        </el-button>
      </div>
    </div>
    <el-descriptions border :column="4">
      <el-descriptions-item label-align="right" label="供应商名称" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierName"
          maxlength="64"
          show-word-limit
        />
        <span v-else>
          {{ baseInfo?.supplierName }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="税号" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierNumber"
          maxlength="64"
        />
        <span v-else>
          {{ baseInfo?.supplierNumber }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="供应商等级" min-width="110">
        <el-select v-if="showIf" v-model="ruleForm.supplierLevel" style="width: 100%" filterable>
          <el-option
            v-for="ite in supplierLevelList"
            :key="ite.value"
            :label="ite.label"
            :value="ite.value"
          />
        </el-select>
        <span v-else>
          {{ baseInfo?.supplierLevel }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="法定代表人" min-width="120">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierPeople"
          maxlength="64"
          show-word-limit
        />
        <span v-else>
          {{ baseInfo?.supplierPeople }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="企业类型" min-width="120">
        <el-select v-if="showIf" v-model="ruleForm.supplierType" style="width: 100%" filterable>
          <el-option
            v-for="ite in supplierTypeList"
            :key="ite.value"
            :label="ite.label"
            :value="ite.value"
          />
        </el-select>
        <span v-else>
          {{ baseInfo?.supplierType }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="注册资本(万元)" min-width="120">
        <el-input-number
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierCapital"
          :precision="2"
          :min="0"
          :max="500000000"
        />
        <span v-else>
          {{ numberFormat(baseInfo?.supplierCapital) }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="组织机构代码" min-width="120">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierCode"
          maxlength="64"
        />
        <span v-else>
          {{ baseInfo?.supplierCode }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="供应商地址" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierAddress"
          maxlength="64"
          show-word-limit
        />
        <span v-else>
          {{ baseInfo?.supplierAddress }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="所属地区" min-width="110">
        <el-cascader
          v-model="ruleForm.supplierArea"
          v-if="showIf"
          style="width: 100%"
          :options="regionData"
        />
        <span v-else>
          {{ baseInfo?.supplierArea }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="所属行业" min-width="110">
        <el-select v-if="showIf" v-model="ruleForm.supplierIndustry" style="width: 100%" filterable>
          <el-option
            v-for="ite in industryList"
            :key="ite.value"
            :label="ite.label"
            :value="ite.value"
          />
        </el-select>
        <span v-else>
          {{ baseInfo?.supplierIndustry }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="供应商状态" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierState"
          maxlength="64"
        />
        <span v-else>
          {{ baseInfo?.supplierState }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="电话" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierPhone"
          maxlength="11"
        />
        <span v-else>
          {{ baseInfo?.supplierPhone }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label-align="right" label="备注" min-width="110">
        <el-input
          v-if="showIf"
          style="width: 100%"
          v-model="ruleForm.supplierRemark"
          maxlength="64"
          show-word-limit
        />
        <span v-else>
          {{ baseInfo?.supplierRemark }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import { regionData, codeToText } from 'element-china-area-data'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { getSupplierById, putSupplier } from '@/api/controller/supplier-controller/index'
  import {
    getSysIndustryList,
    getSysLevelList,
    getSysSupplierTypeList,
  } from '@/api/controller/sys-user-controller/index'
  const load = ref(true)
  const supplierTypeList = ref([])
  const supplierLevelList = ref([])
  const industryList = ref([])
  onMounted(async () => {
    getSysSupplierTypeList().then((res) => {
      supplierTypeList.value = res.data
    })
    getSysIndustryList().then((res) => {
      industryList.value = res.data
    })
    getSysLevelList().then((res) => {
      supplierLevelList.value = res.data
    })
    await getData()
  })
  //获取数据
  const baseInfo = ref<any>()
  const supplierId = ref(history.state?.id)
  const getData = async () => {
    try {
      load.value = true
      let res = await getSupplierById({ id: supplierId.value })
      baseInfo.value = res.data
      showIf.value = false
    } finally {
      load.value = false
    }
  }

  const showIf = ref(false)
  const ruleForm = ref<any>()
  //编辑模式
  const editMode = () => {
    showIf.value = true
    ruleForm.value = JSON.parse(JSON.stringify(baseInfo.value))
    let a = ruleForm.value.supplierArea.split('/')
    for (let i = 0; i < a.length; i++) {
      a[i] = textToCode(a[i], regionData)
    }
    ruleForm.value.supplierArea = a
  }

  //编辑结束提交数据
  const submit = async () => {
    if (
      ruleForm.value.contractName ||
      ruleForm.value.supplierId ||
      ruleForm.value.contractDate ||
      ruleForm.value.contractAmount
    ) {
      ElMessage.warning('合同名称、客户、签订日期、合同金额不能为空')
      return
    }
    let a = codeToText[ruleForm.value.supplierArea[0]]
    let b = codeToText[ruleForm.value.supplierArea[1]]
    let c = codeToText[ruleForm.value.supplierArea[2]]
    ruleForm.value.supplierArea = a + '/' + b + '/' + c
    let result = await putSupplier(ruleForm.value, { loading: true })
    if (result.code === 200) {
      await emit('getAllData')
      ElMessage.success('更新成功')
    }
  }

  //地区码转地区
  const textToCode = (text, areaData) => {
    for (let i = 0; i < areaData.length; i++) {
      if (areaData[i].label === text) {
        return areaData[i].value
      }
      const children = areaData[i].children
      if (children && children.length > 0) {
        const result = textToCode(text, children)
        if (result) {
          return result
        }
      }
    }
    return null
  }

  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
  .head {
    background-color: white;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    margin: 0 0 10px 0;
    padding: 20px;
    border-radius: 8px;
    .more-file {
      margin-right: 14px;
      margin-left: 10px;
    }
    .link {
      color: #1890ff;
      margin-right: 30px;
      text-decoration: underline;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: color 0.3s;
    }
    .link:hover {
      color: #40a9ff;
    }
  }
</style>
